<template>
  <div class="hello">
    <el-row>
      <el-col :span="8">
        <el-tabs type="card" value="accounts">
          <el-tab-pane label="结账" name="accounts">
            <el-table :data="orderData" stripe border :summary-method="getSummaries" show-summary  >
              <el-table-column label="产品" prop="goodsName" width="100"></el-table-column>
              <el-table-column label="价格" prop="price" width="50"></el-table-column>
              <el-table-column label="数量" prop="count"  min-width="80">
                <template slot-scope="props">
                  <el-input-number size="mini" :min="1" v-model="props.row.count" controls-position="left"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="选项" prop="option" fixed="right" width="70">
                <template slot-scope="scoped">
                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="delSingle(scoped.row.goodsId)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="挂单" name="blii">挂单</el-tab-pane>
          <el-tab-pane label="外卖" name="takeOut">外卖</el-tab-pane>
        </el-tabs>
        <div class="option">
          <el-button type="danger" @click="delAll">取消</el-button>
          <el-button type="warning">挂单</el-button>
          <el-button type="success" @click="submitGoods">结账</el-button>
        </div>
      </el-col>
      <el-col :span="16">
        <el-container style="background:#F2F6FC;">
          <el-header id="el-header">
            <span>常用</span>
            <hr>
            <ul class="often-goods-list">
              <li v-for="item in oftenGoods" :key="item.goodsId" @click="addGoods(item)">
                <span>{{item.goodsName}} </span>
                <span class="rmb">￥{{item.price}}元</span>
              </li>
            </ul>
          </el-header>
          <el-footer id="el-footer">
            <el-tabs type="border-card" style="height:95%">
              <el-tab-pane label="汉堡">
                <ul class="goods-list">
                  <li v-for="item in Goods[0]" :key="item.goodsId" @click="addGoods(item)">
                    <img :src="item.goodsImg" alt="">
                    <div class="info">
                      <span>{{item.goodsName}}</span>
                      <p class="rmb">￥{{item.price}}</p>
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="副食"> <ul class="goods-list">
                  <li v-for="item in Goods[1]" :key="item.goodsId" @click="addGoods(item)">
                    <img :src="item.goodsImg" alt="">
                    <div class="info">
                      <span>{{item.goodsName}}</span>
                      <p class="rmb">￥{{item.price}}</p>
                    </div>
                  </li>
                </ul>
                
              </el-tab-pane>
              <el-tab-pane label="饮料">
                 <ul class="goods-list">
                  <li v-for="item in Goods[2]" :key="item.goodsId" @click="addGoods(item)">
                    <img :src="item.goodsImg" alt="">
                    <div class="info">
                      <span>{{item.goodsName}}</span>
                      <p class="rmb">￥{{item.price}}</p>
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
              <el-tab-pane label="套餐"> <ul class="goods-list">
                  <li v-for="item in Goods[3]" :key="item.goodsId" @click="addGoods(item)">
                    <img :src="item.goodsImg" alt="">
                    <div class="info">
                      <span>{{item.goodsName}}</span>
                      <p class="rmb">￥{{item.price}}</p>
                    </div>
                  </li>
                </ul>
              </el-tab-pane>
            </el-tabs>
          </el-footer>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Casher",
  data() {
    return {
      // 订单数据
      orderData: [],
      // 常用商品
      oftenGoods: [],
      // 商品
      Goods: []
    };
  },
  created: function() {
    axios
      .get("http://jspang.com/DemoApi/oftenGoods.php")
      .then(data => {
        console.log(data);
        this.oftenGoods = data.data;
      })
      .catch(err => {
        console.log(err);
        this.$message.error("拉去常用商品列表错误！");
      });
    axios
      .get("http://jspang.com/DemoApi/typeGoods.php")
      .then(req => {
        console.log(req);
        this.Goods = req.data;
      })
      .catch(err => {
        console.log(err);
        this.$message.error("拉去商品列表错误！");
      });
  },
  mounted: function() {
    const elFooter = document.getElementById("el-footer");
    const elHeader = document.getElementById("el-header");
    let heigth = Math.max(
      document.documentElement.clientHeight,
      window.innerHeight
    );
    elHeader.style.height = heigth / 3 + "px";
    elFooter.style.height = heigth / 1.5 + "px";
  },
  methods: {
    addGoods(goods) {
      let exilt = false;
      // 遍历是否存在
      this.orderData.forEach(item => {
        if (item.goodsId == goods.goodsId) {
          exilt = true;
        }
      });
      // 如果已经存在
      if (exilt) {
        // 过滤返回的是一个数组
        this.orderData.filter(o => o.goodsId == goods.goodsId)[0].count++;
      } else {
        this.orderData.push({
          goodsId:goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        });
      }
    },
    // 汇总
    getSummaries(param){
      const {columns, data} = param;
      const sums = [];
      // 如果是有数据的
      if (data.length != 0) {
        sums[0] = '汇总';
        sums[1] = data.map(item => item.price * item.count).reduce((x,y) => x + y) + '元';
        sums[2] = data.map(item => item.count).reduce((x,y) => x + y) + '个';
        sums[3] = '';
      }
      return sums;
    },
    // 删除单个商品
    delSingle(goodsId){
      this.orderData = this.orderData.filter(item => item.goodsId != goodsId);
    },
    // 取消订单：删除全部商品
    delAll(){
      this.orderData = [];
    },
    submitGoods(){
      if (this.orderData.length != 0) {
        console.log(this.orderData);
        this.$message.success('提交订单成功！')
      } else {
        this.$message.error('数据不合法！')
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 95%;
  margin-left: 5%;
}
.option {
  margin-top: 1rem;
}
.often-goods-list {
  list-style: none;
}
.often-goods-list > li {
  padding: 0.7rem;
  border: 1px solid #dcdfe6;
  float: left;
  margin: 0.5rem;
  background-color: #fff;
  cursor: pointer;
}
.rmb {
  color: rgb(42, 117, 238);
}
.goods-list {
  list-style: none;
}
.goods-list li {
  float: left;
  padding: 0.3rem;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  margin: 0.5rem;
  width: 20%;
  cursor: pointer;
}
.goods-list li img {
  width: 4rem;
  margin-right: 0.5rem;
}
.goods-list li div {
  float: right;
}
.goods-list li span {
  color: red;
}
</style>
